<template>
    <div class="top">
        <div class="left">
            <el-select v-model="value" filterable placeholder="机构类型" size="large" class="select">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="left">
            <el-select v-model="value" filterable placeholder="区域类型" size="large" class="select">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="search">
            <div class="right">
                <el-input v-model="input" class="w" size="large" placeholder="请输入搜索关键字" />
                <div class="button">
                    <el-button type="primary" class="btn">搜索</el-button>
                </div>
            </div>
            <div class="button1">
                <el-button type="primary" class="btn1">{{ msg }}</el-button>
            </div>

        </div>
    </div>
</template>

<script lang="ts">



import { defineComponent } from 'vue'
import { ref } from "vue"
export default defineComponent({
    props: ['msg'],

    setup(props) {
        const input = ref("")
        const value = ref("")
        const options = [
            {
                value: "OPtion1",
                label: "option1"
            }
        ]
        return {
            input,
            value,
            options
        }
    }

})

</script>

<style scoped>
.top {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.select {
    width: 134px;
}

.right {
    display: flex;
}

.w {
    height: 38px;
}

.left {
    margin: 20px;
    display: flex;
    flex: 1;

}

.button {
    margin-left: 10px;
}

.btn {
    height: 38px;

}

.button1 {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;


}

.btn1 {
    height: 38px;
    float: right;

}

.search {
    display: flex;
    justify-content: space-between;
    flex: 8;
}
</style>